<template>
  <div class="app-container" v-loading.lock="fullscreenLoading">
    <el-card>
      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="110px">
        <title-line title="基本信息" />
        <el-form-item class="m-t" label="场景名称" prop="name">
          <el-input
            type="textarea"
            class="form-input-large"
            placeholder="请输入应用场景（1-50）"
            v-model="formData.name"
            maxlength="50"
            show-word-limit
            style="width: 320px"
          />
        </el-form-item>

        <el-form-item class="m-t" label="路径名称" prop="pageUrl">
          <ScrollSelect
            placeholder="请输入选择路径"
            :selected-value="formData.pageUrl"
            :get-list-methods="getListMethods"
            :get-list-format="getFormat"
            :clearable="true"
            style="width: 320px"
            search-key="path"
            :disabled="type == 'edit'"
            @selectedChange="selectedPath"
          />
        </el-form-item>
        <el-form-item class="m-t" label="场景描述">
          <el-input
            type="textarea"
            :rows="4"
            class="form-input-large"
            placeholder="请输入场景描述（1-200字）"
            v-model="formData.remark"
            maxlength="200"
            show-word-limit
            style="width: 320px"
          />
        </el-form-item>
        <el-form-item class="m-t" label="是否启用" prop="isShow">
          <el-radio-group v-model="formData.isShow">
            <el-radio :label="true">启用</el-radio>
            <el-radio :label="false">隐藏</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
    </el-card>
    <div class="footer">
      <el-button plain @click="handleCancel">取消</el-button>
      <el-button type="primary" @click="handleGenerate">生成二维码</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'addSceneCode',
  components: {},
  mixins: [],
  props: {},
  data() {
    return {
      type: 'add',
      options: {
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      },
      formData: {
        name: '',
        pageUrl: '',
        remark: '',
        isShow: true,
        qrcode: {}
      },
      rules: {
        name: [{ required: true, message: '请输入场景名称', trigger: 'blur' }],
        pageUrl: [{ required: true, message: '请输入路径链接', trigger: 'change' }],
        isShow: [{ required: true, message: '请选择是否启用', trigger: 'change' }]
      },
      getListMethods: params => {
        return this.handlePath(params)
      },
      getListFormat: (list = []) => {
        // 下拉框数据格式
        return list.map(({ storeName, id }) => ({
          label: storeName,
          value: id
        }))
      },

      getFormat: (list = []) => {
        // 下拉框数据格式
        return list.map(({ name, path }) => ({
          label: name,
          value: path
        }))
      },

      // 路径数组
      pathList: [],
      id: '',
      fullscreenLoading: false
    }
  },

  created() {
    const { type, id } = this.$route.query
    if (type) this.type = type
    if (id) this.id = id
    if (type === 'edit') {
      this.handleDetails(id)
    }
  },
  methods: {
    //获取二维码详情
    async handleDetails() {
      const { data } = await this.$http.sceneCode.detail(this.id)
      for (let i in this.formData) {
        this.formData[i] = data[i]
      }
      console.log(data)
    },

    selectedPath(path) {
      this.formData.pageUrl = path
      this.handlePath()
    },

    // 页面路径
    async handlePath() {
      const params = { path: '' }
      const { data } = await this.$http.sceneCode.pageWay(params)
      return data
    },

    //只能输入英文和特殊字符
    urlChange(val) {
      val = val.trim()
      this.formData.scenePath = val.replace(/^[\u4e00-\u9fa5]+$/, '')
    },

    //生成二维码
    handleGenerate() {
      this.$refs.elForm.validate(async valid => {
        const params = {
          ...this.formData
        }

        if (valid) {
          this.fullscreenLoading = true
          const msg = this.type === 'add' ? '新增成功' : '编辑成功'
          // 新增
          if (this.type === 'add') {
            params.qrcode = {
              checkPath: true,
              envVersion: 'release',
              hyaline: false,
              page: 'pages/init/index'
            }
            await this.$http.sceneCode.addSceneCode(params).catch(err => err)
          } else {
            // 编辑
            params.envVersion = 'release'
            params.id = this.id
            await this.$http.sceneCode.editSceneCode(params).catch(err => err)
          }

          this.$message.success(msg)
          this.fullscreenLoading = false
          this.handleCancel()
        }
      })
    },
    //取消
    handleCancel() {
      this.$router.go(-1)
    }
  }
}
</script>

<style lang="scss" scoped>
/deep/.el-textarea .el-input__count {
  right: -45px;
}

.footer {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
</style>
